<script>
import {cancelOrderApi, payOrderApi, receiptOrderApi} from "@/pagesOrders/api/orders"
import cancelOrderConfirm from "@/pagesOrders/mixin/cancelOrderConfirm"

export default {
  name: "OrderListItem",
  mixins: [cancelOrderConfirm], // 取消确认框
  methods: {
    // 取消订单
    async cancelOrder(order_id) {

      const confirmed = await this.cancelOrderConfirm()

      if (confirmed) { // 如果确认
        await cancelOrderApi(order_id)

        this.$emit('order-updated') // 通知父组件重新从后端请求订单列表
      }
    },

    // 确认收货
    async receiptOrder(order_id) {
      await receiptOrderApi(order_id)

      this.$emit('order-updated') // 通知父组件重新从后端请求订单列表
    },

    async payOrder(order_id) {
      await payOrderApi(order_id)

      this.$emit('order-updated') // 通知父组件重新从后端请求订单列表
    }
  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<template>
  <div class="order-list-item">

    <div class="tit">
      <div class="time">{{ item.create_time }}</div>
      <div class="status">
        <text>{{ item.state_text }}</text>
      </div>
    </div>

    <div class="list">
      <div v-for="goods in item.goods" :key="goods.goods_id" class="list-item">

        <div class="goods-img">
          <image :src="goods.goods_image" alt=""/>
        </div>

        <div class="goods-content text-ellipsis-2">
          {{ goods.goods_name }}
        </div>

        <div class="goods-trade">
          <p>¥ {{ goods.goods_price }}</p>
          <p>x {{ goods.total_num }}</p>
        </div>
      </div>
    </div>

    <div class="total">
      共{{ item.total_num }}件商品，总金额 ¥{{ item.total_price }}
    </div>

    <div class="actions">
      <!-- order_status 应该是订单的主状态 -->
      <!-- 10 可能代表订单进行中 -->
      <!-- 30 可能代表订单已完成 -->

      <div v-if="item.order_status === 10">
        <!-- pay_status === 10 可能表示未支付 -->
        <text
            v-if="item.pay_status === 10"
            @click="payOrder(item.order_id)"
        >
          立刻付款
        </text>

        <!-- delivery_status 应该是配送状态 -->
        <!-- delivery_status === 10 可能是未发货 -->
        <!-- @click.stop 防止点击事件冒泡到父元素触发父元素的点击事件-->
        <text
            v-else-if="item.delivery_status === 10"
            @click.stop="cancelOrder(item.order_id)"
        >
          申请取消
        </text>

        <!-- delivery_status === 20 或 30 可能分别代表已发货和运输中 -->
        <text
            v-else-if="item.delivery_status === 20 || item.delivery_status === 30"
            @click="receiptOrder(item.order_id)"
        >
          确认收货
        </text>
      </div>

      <!-- order_status === 30 可能表示订单已完成，可以评价 -->
      <div v-else-if="item.order_status === 30">
        <text>评价</text>
      </div>
    </div>

  </div>
</template>

<style lang="less">
.order-list-item {
  margin: 10px auto;
  width: 94%;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  border-radius: 8px;
  color: #333;
  font-size: 13px;

  .tit {
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .status {
      color: #fa2209;
    }
  }

  .list-item {
    display: flex;

    .goods-img {
      width: 90px;
      height: 90px;
      margin: 0 10px 10px 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .goods-content {
      flex: 2;
      line-height: 18px;
      max-height: 36px;
      margin-top: 8px;
    }

    .goods-trade {
      flex: 1;
      line-height: 18px;
      text-align: right;
      color: #b39999;
      margin-top: 8px;
    }
  }

  .total {
    text-align: right;
  }

  .actions {
    text-align: right;

    text {
      display: inline-block;
      line-height: 28px;
      border: 0.5px solid #a8a8a8;
      font-size: 14px;
      padding: 0 15px;
      border-radius: 5px;
      margin: 10px 0;
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>
